<template>
	<view>
		<view class="nav-bar" :style="{background}">
			<status-bar></status-bar>
			<view class="nav-bar-view">
				<view class="nav-bar-left">
					<slot name="left"></slot>
				</view>
				<view class="nav-bar-center">
					<slot name="center"></slot>
				</view>
				<view class="nav-bar-right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "NavBar",
		props: {
			background: {
				type: String,
				default: '#FF2615'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		width: 100%;
		
	}

	.nav-bar-view {
		width: 100%;
		height: 44px;
		padding: 0 30upx;
		@extend .row-between;

		.nav-bar-left {
			@extend .row-start;
			font-size: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}

		.nav-bar-center {}

		.nav-bar-right {
			@extend .row-end;
		}
	}
</style>